<template>
  <div class="bg-shadow">
    <div class="add-coin">
      <div class="header flex-center">
        <span>{{action == 'add' ? '新增' : '编辑'}}</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        class="form"
        label-width="150px"
        label-position="left"
        size="small"
      >
        <el-form-item label="币种" prop="currency">
          <el-select
            v-model="form.currency"
            placeholder="请选择币种"
            size="medium"
            :disabled="action === 'edit'"
          >
            <el-option
              v-for="item in currencyList"
              :key="item.coin_id"
              :label="item.currency"
              :value="item.currency"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动审核分类" prop="category">
          <el-select v-model="form.category" placeholder="请选择自动审核分类" filterable>
            <el-option
              v-for="item in category"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动审核范围" prop="autoReviewLimit">
          <el-input v-model="form.autoReviewLimit" placeholder="请填写自动审核范围"></el-input>
        </el-form-item>
        <el-form-item label="实名额度" prop="realNameLimit">
          <el-input v-model="form.realNameLimit" placeholder="请填写实名额度"></el-input>
        </el-form-item>
        <el-form-item label="未实名额度" prop="noRealNameLimit" inline-message>
          <el-input v-model="form.noRealNameLimit" placeholder="请填写未实名额度"></el-input>
        </el-form-item>
        <el-form-item label="达限额后方式" inline-message>
          <el-select v-model="form.overLimitOp" size="medium">
            <el-option
              v-for="item in limits"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="flex-center">
          <el-button size="small" type="primary" @click="submit">确定</el-button>
          <el-button size="small" @click="$emit('cancel')">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { EditWithdrawLimit } from "@/views/AssetsManage/Assets.service";

export default {
  props: ["operateData", "action", "currencyList"],
  data() {
    return {
      form: {
        currency: this.operateData.currency,
        category: this.operateData.category,
        autoReviewLimit: this.operateData.auto_review_limit,
        realNameLimit: this.operateData.real_name_limit,
        noRealNameLimit: this.operateData.no_real_name_limit,
        overLimitOp: this.operateData.over_limit_op || "1"
      },
      rules: {
        category: [
          { required: true, message: "分类不能为空", trigger: "blur" }
        ],
        autoReviewLimit: [
          { required: true, message: "自动审核范围不能为空", trigger: "blur" }
        ]
        // realNameLimit: [
        //   { required: true, message: "实名额度不能为空", trigger: "blur" }
        // ],
        // noRealNameLimit: [
        //   { required: true, message: "未实名额度不能为空", trigger: "blur" }
        // ]
      },
      limits: [
        {
          label: "用户无法提币",
          value: "1"
        },
        {
          label: "可提币但转人工",
          value: "2"
        }
      ]
    };
  },
  computed: {
    category() {
      return [{ label: "数量", value: "1" }, { label: "价值", value: "2" }];
    }
  },
  methods: {
    async submit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const res = await EditWithdrawLimit(this.form);
          if (res.code === 1) {
            this.$notify.success({
              title: "提示",
              message: "编辑成功"
            });
            this.$emit("success");
          }
        } else {
          this.$notify.warning({
            title: "提示",
            message: "请检查参数！"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.bg-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
}

.add-coin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  min-width: 600px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;

  .header {
    margin-bottom: 10px;
    padding: 15px 0;

    span {
      font-weight: 600;
      font-size: 18px;
    }

    i {
      position: absolute;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
      transition: 0.2s;
    }

    i:hover {
      color: #409eff;
    }
  }

  .form {
    padding: 20px 50px;
    max-height: 600px;
    overflow-y: scroll;

    .tab-item {
      position: relative;

      label {
        position: absolute;
        top: 55px;
      }
    }

    .el-input-number {
      width: 100%;
    }

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }

    .scaleIMGdisabled {
      .el-upload--picture-card {
        display: none;
      }
    }
  }
}
</style>
